<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <script src="vue-resource.min.js"></script>
    <title>Title</title>
</head>
<body>
<div class="znsArea">
    <!--留言-->
    <div class="takeComment">
        <textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="tl"></textarea>
        <div class="takeSbmComment">
            <input type="button" class="inputs" value="提交留言" @click="add" />
            <span>(可按 Enter 回复)</span>
        </div>
    </div>
    <!--已留-->
    <div class="commentOn">
        <div class="noContent" v-show="msgData.length==0">暂无留言</div>
        <div class="messList">
            <div class="reply" v-for="item in msgData">
                <p class="replyContent">{{item.content}}</p>
                <p class="operation">
                    <span class="replyTime">{{item.time}}</span>
                    <span class="handle">
                    	<a href="javascript:;" class="top">{{item.acc}}</a>
                        <a href="javascript:;" class="down_icon">{{item.ref}}</a>
                        <a href="javascript:;" class="cut">删除</a>
                    </span>
                </p>
            </div>
        </div>
        <div class="page">
            <a href="javascript:;" class="active">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
        </div>
    </div>
</div>
</body>
<script>
    var url = 'weibo.php';
    var app = new Vue({
        el: '.znsArea',
        data:{
            tl:'',
            msgData:[]
        },
        methods:{
            add: function () {
                this.$http({
                    url:url,
                    data: {
                        act:'add',
                        content: this.tl
                    }
                }).then(function(res){
                   var json = res.data;
                   this.msgData.unshift({
                       'content':this.tl,
                       'time': json.time,
                       acc:0,
                       ref:0,
                       id:json.id
                   })
                })
            },
            getPageData: function (n) {
                this.$http({
                    url:url,
                    data:{
                        page:n,
                        act:'get'
                    }
                }).then(function(res){
                    this.msgData = res.data;
                })
            }
        },
        beforeCreate:function(){
           console.log('bedoreCreated');
        },
        created: function () {
            console.log('created');
        },
        beforeCompile:function(){
            alert('编译前');
        },
        compile:function(){
            alert('编译后');
        },
        beforeDestroy:function(){
            alert('销毁前');
        },
        destroy:function(){
            alert('销毁后');
        }
    });
</script>
</html>
